import Base from "../base.js"
// import GradlesApi from "../../api/gradles.js"
import MoviesAdd from "../../api/movies.js"
const movieProst = [

    {
        name: "电影名",
        key: "cname"
    },
    {
        name: "电影英文名",
        key: "ename"
    },
    {
        name: "电影的类型",
        key: "type"
    },
    {
        name: "电影首映地区",
        key: "area"
    },

    {
        name: "电影时长",
        key: "time"
    },
    {
        name: "电影大陆上映时间",
        key: "upDate"
    },
    {
        name: "电影评分",
        key: "score"
    },
    {
        name: "电影票房",
        key: "count"
    },
    {
        name: "剧情简介",
        key: "intro"
    },
    {
        name: "是否是经典",
        key: "isClassic"
    },
    {
        name: "导演名字",
        key: "director"
    },
    {
        name: "演员名字",
        key: "actor"
    },

];
export default class extends Base {
    data = {
        movie: {
            id: "", // mongodb 自动生成的 id   
            cname: "1", // 电影名   
            ename: "2", // 电影英文名   
            type: ";", // 电影的类型   
            area: "3", // 电影首映地区    
            time: "4", //电影时长    
            upDate: "String", // 电影大陆上映时间,    
            score: 9.1, // 电影评分   
            count: "String", // 电影票房    
            intro: "String", // 剧情简介    
            isClassic: "true", // 是否是经典    
            director: "String", // 导演名字  
            actor: "String", // 演员名字    
        },
    };
    render() {
        // const student=this.data;
        this.$el.html(`
       <div>
        <table>
            <div style="text-align:center"><h1>新增电影</h1></div>
        ${movieProst.map(item => {
            if (item.key === "isClassic") {
                return `
                <div class="layui-form-item" style="padding: 10px;width:400px;margin:auto;margin-left:460px">
                <label class="layui-form-label" style="width:190px">${item.name}</label>
                <div class="layui-input-block">
                <select  name="isClassic" lay-verify="required" class="isClassic" style="width:190px;height:36px;border-color:#eeeeee;outline:none">
                <option value=""></option><option value="false">否</option><option value="ture">是</option>
                </select>
                </div>
            </div>
                `
            };
            return `
                <div class="layui-form-item" style="padding: 10px;width:400px;margin:auto;margin-left:460px">
                <label class="layui-form-label" style="width:190px">${item.name}</label>
                <div class="layui-input-block">
                <input type="text" style="width:190px" placeholder="请输入${item.name}" name="${item.key}" required  lay-verify="required" placeholder="请输入${item.name}" autocomplete="off" class="layui-input" >
                </div>
            </div>
            
            `
        }).join("")}
            <tr>
            </tr>
            <tr>
            <td style="width:600px"></td>
            <td><button class="upload-btn-imgs layui-btn layui-btn-lg layui-btn layui-bg-gray" style="margin-right:10px" disabled>剧集图片上传</button></td>
            <td><button class="save-btn layui-btn layui-btn-lg layui-btn">保存</button></td>
            </tr>
            </tbody>
            </table>
        </div>
        `);
        this.$isClassicEl = $(".isClassic")
    }
    async add() {
        if (confirm("确定要新增吗!")) {
            // $(".upload-btn-poster").attr("disabled", false).removeClass("layui-bg-gray");
            $(".upload-btn-imgs").attr("disabled", false).removeClass("layui-bg-gray");
            const { cname, ename, type, time, upDate, score, count, intro,area, isClassic, director, actor, } = this.data.movie;
            this.data.movie = await MoviesAdd.add({ cname, ename, type, time,area, upDate, score, count, intro, isClassic, director, actor, })
        } else {

        }

    }
    // async uploadPoster() {
    //     location.hash = `#/info/upload-poster/${this.data.movie._id}`;
    // };
    async uploadImgs() {
        location.hash = `#/info/upload-imgs/${this.data.movie._id}`;
    }
    handle() {
        const { movie } = this.data;
        _.map(movie, (v, k) => {
            if (k === "_id") {
                return;
            } else if (k === "isClassic") {
                $(".isClassic").on("change", e => {
                    movie.isClassic = e.target.value
                })
            } else {
                $(`input[name=${k}]`).on("input", e => {
                    movie[k] = e.target.value
                })
            }

        });
        $(".save-btn").on("click", this.add.bind(this));
        // $(".upload-btn-poster").on("click", this.uploadPoster.bind(this))
        $(".upload-btn-imgs").on("click", this.uploadImgs.bind(this))
    }



}